<template>
    <section class="todoapp">
        <Todoheader :arr="list" @addFn="addFn" @isAll="isAll"></Todoheader>
        <TodoMain :list="newarr" @delFn="delFn" ></TodoMain>
        <TodoFooter :list="list" @change="changeFn" @eliminate="eliminate"></TodoFooter>
    </section>
</template>

<script>
// 样式引入 + 导入组件并注册使用
import Todoheader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'
// import 'bootstrap/dist/css/bootstrap.css'
import './styles/base.css'
import './styles/index.css'

export default {
    data() {
        return {
            type: 'all',
            list: [
                {
                    id: 100,
                    name: '吃饭',
                    isDone: true,
                },
                {
                    id: 201,
                    name: '睡觉',
                    isDone: false,
                },
                {
                    id: 103,
                    name: '打豆豆',
                    isDone: true,
                },
            ],
        }
    },
    components: {
        Todoheader,
        TodoMain,
        TodoFooter
    },
    methods: {
        addFn(text) {
            this.list.unshift({
                id: +new Date(),
                name: text,
                isDone: false
            })
        },
        delFn(id) {
            this.list = this.list.filter(item => item.id !== id)
        },
        changeFn(type) {
            this.type = type
            console.log(this.newArr)
        },
        eliminate() {
            this.list = this.list.filter(item => !item.isDone)
        },
        isAll(val) {
            this.list.forEach(item => item.isDone = val)
        }
    },
    computed: {
        newarr() {
            if(this.type === 'all') {
                return this.list
            }else if(this.type === 'active') {
                return this.list.filter(item => !item.isDone)
            }else if (this.type === 'ready') {
                return this.list.filter(item => item.isDone)
            }
        }
    }
}
</script>
